<template>
  <div>
    <Header></Header>
    <LoginHeader/>
    <div class="body-main">
      <h5 style="margin-left: 100px">确认收货地址</h5>
      <ul class="address">
        <li v-for="(c,index) in this.addrs" :key="index">
          <input class="choice-address" type="radio" :value="index" v-model="opts" :data-index="index" @click="chooseAddr"/>
          <span id="province">{{c.province+" "}}</span>
          <span id="city">{{c.city+" "}}</span>
          <span id="area">{{c.area+" "}}</span>
          <span id="addr">{{c.addr+" "}}</span>
          <span id="user">{{c.receiverName+" "}}</span>
          <span id="phone">{{c.receiverMobile+" "}}</span>
        </li>
      </ul>
      <div class="payment-method">
        <h5>选择支付方式</h5>
        <img class="we-chat" src="" alt="" :style="this.imgBorder" @click="this.clickPay">
      </div>
      <div class="check-the-order"><h4
          style="display: block;margin-left: 0px;margin-top: 0px;font-weight: 400;font-size: 14px">确认订单信息</h4><h5>
        店铺宝贝</h5><h5>商品属性</h5><h5>单价</h5><h5>数量</h5><h5>小计</h5></div>
      <div class="shop-infos">
        <ul class="shop-name">
          <li>
            <h5 style="display: inline-block">店铺:卫龙小辣条</h5><h5 style="display: inline-block;margin-left:30px">卖家:张三</h5>
            <ul class="shop-shops">
              <li v-for="(c,index) in this.shopCart" :key="index">
                <div class="shopcart-shop">
                  <img :src="getUrl(c.url)" alt="" style="width: 50px;height: 50px;margin-top: 10px">
                  <a id="title-of-shop">这个是一个垃圾服装asdasdasdasdasd</a>
                  <h6>{{c.skuProps}}</h6>
                  <h6 style="margin-left: 345px">{{c.sellPrice}}</h6>
                  <h6 style="margin-left: 505px">{{c.cartNum}}</h6>
<!--                  <h6 style="margin-left: 655px">{{}}折</h6>-->
                  <h6 style="margin-left: 660px">{{c.sellPrice * c.cartNum}}</h6>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="pay-for-theshop">
        <h5 style="margin-top: 30px;display: inline-block">实付款:</h5><div class="shop-price-icon">￥</div><div class="shop-price">{{this.totalPrice}}</div>
<!--        <h5 style="margin-top: 5px;display: block">寄送至:{{this.addrs[this.opts].province}} {{this.addrs[this.opts].city}} {{this.addrs[this.opts].area}} {{this.addrs[this.opts].addr}}</h5>-->
<!--        {{this.addrs[this.opts].province}} {{this.addrs[this.opts].city}} {{this.addrs[this.opts].area}} {{this.addrs[this.opts].addr}}-->
<!--        <h5 style="margin-top: 10px;display: block">收货人:{{this.addrs[this.opts].receiverName}} {{this.addrs[this.opts].receiverMobile}}</h5>-->
<!--        {{this.addrs[this.opts].receiverName}} {{this.addrs[this.opts].receiverMobile}}-->
        <div>
          <el-button class="total-btn-back" @click="toPayTheOrder">返回购物车</el-button>
          <el-button class="total-btn" @click="this.doSubmit">提交订单</el-button>
        </div>
      </div>
    </div>
    <LoginFooter/>
  </div>
</template>

<script>
import Header from "../components/Header";
import LoginFooter from "../components/LoginFooter";
import LoginHeader from "../components/LoginHeader";
import {publicFun} from "../mixin";
export default {
  name: "pay",
  components: {
    Header, LoginFooter, LoginHeader
  },
  data(){
    return{
      token:"",
      userId:"",
      cartIds:"",
      addrs:[],
      shopCart:[],
      opts:0,
      addrIndex:0,//用户选择地址得索引,
      totalPrice:0,
      imgBorder:"",
      ifchose:false,
      payType:0,
      orders:{},
      aOrders:{},
      province:""
    }
  },
  methods:{
    doSubmit(){
      //提交订单信息
      //1 准备订单数据
      var address = this.addrs[this.opts].province + "" + this.addrs[this.opts].city+""+this.addrs[this.opts].area+""+this.addrs[this.opts].addr;
      this.orders={
        "actualAmount": this.totalPrice,
        "orderRemark": "",
        "payType": this.payType,
        "receiverAddress":address ,
        "receiverMobile": this.addrs[this.opts].receiverMobile,
        "receiverName": this.addrs[this.opts].receiverName,
        "totalAmount": this.totalPrice,
        "userId": this.getCookieValue("userId")
      }
      this.aOrders = {
       "cids":this.cartIds,
        "orders":this.orders
      };
      this.$axios({
        url:"api/OrderService/add",
        method:"post",
        data:this.aOrders
      }).then((res)=>{
        if(res.data.code==201)
        {
          var orderId = res.data.data.orderId;
          var payUrl = res.data.data.payUrl;
          var totalPrice = this.totalPrice;
          console.log(res)
          this.$router.push({path:'/payForOrder',query:{orderId:orderId,totalPrice:totalPrice,payUrl:payUrl}})
        }
      })
    }
    ,
    getAddrList(){
      this.token=this.getCookieValue("token");
      this.userId=this.getCookieValue("userId");
      this.$axios.get("api/userAddr/userAddrById",{
        headers:{
          token:this.token
        },
        params:{
          userId:this.userId
        }
      }).then((res)=>{
        if(res.data.code==201)
        {
          this.addrs = res.data.data;
          console.log(this.addrs)
          for(var i = 0;i<this.addrs.length;i++)
          {
            if(this.addrs[i].commonAddr==1)
            {
              this.otps = i;
              console.log(this.opts)
            }
          }
        }
        else{
          this.$router.push({path:'api//ysLogin'})
        }
      })
    },
    getListByCids(){
      this.cartIds = this.$route.query.cids;
      this.$axios.get("api/shopCart/listByCids",{
        headers:{
          token:this.getCookieValue("token")
        },
        params:{
          cids:this.cartIds
        }
      }).then((res)=>{
        if(res.data.code==201)
        {
          this.shopCart = res.data.data;
          for(var i = 0;i<this.shopCart.length;i++)
          {
            this.totalPrice = this.totalPrice + this.shopCart[i].cartNum * this.shopCart[i].sellPrice
          }
          console.log(this.shopCart)
        }
        else{
          this.$router.push({path:'/ysLogin'})
        }
      })
    },
    getUrl(name) {
      return require("../assets/img/" + name + ".jpg");
    },
    chooseAddr(event){
      var index = event.srcElement.dataset.index;
      console.log(index)
    },
    clickPay(){
       this.ifchose = !this.ifchose;
       // console.log(this.ifchose)
       if(this.ifchose)
       {
         this.payType = 1;
         this.imgBorder="border-color:#70bfc2"
       }else{
         this.payType = 0;
         this.imgBorder=""
       }
       // console.log("hello")
    }
  },
  mounted() {
this.getAddrList();
this.getListByCids();
  },
  created:function (){
  },
  mixins:[publicFun],
}
</script>
<style scoped>
.total-btn,.total-btn-back {
  width: 100px;
  height: 45px;
  margin-left: 80px;
  margin-top: 40px;
  /*border-radius: 20px;*/
  background-color: rgba(48, 184, 189, 1);
  transition-property: background-color, color;
  transition-duration: 500ms, 500ms;
  color: white;
  border: none;
  display: inline-block;
  text-align: center;
  font-size: 14px;
}
.total-btn-back:hover {
  background-color: #0075bd;
  border: none;
}
.total-btn:hover {
  background-color: #0075bd;
  border: none;
}
.shop-price{
  display: inline-block;
  font-size: 30px;
}
.shop-price-icon{
  display: inline-block;
  font-size: 30px;
  color: #b7b6b6;
}
.pay-for-theshop{
  width: 400px;
  height: 200px;
  border-radius: 50px;
  border: 5px solid rgba(121, 232, 220, 0.45);
  margin-top: 50px;
  margin-left: 780px;
}
.shopcart-shop>h6{
  display: inline-block;
  position: absolute;
  margin-top: 10px;
  margin-left: 130px;
}
.shopcart-shop {
  width: 1000px;
  height: auto;
  /*border: 1px solid red;*/
}

#title-of-shop:hover {
  color: #01ccb3;
  cursor: pointer;
}

#title-of-shop {
  width:10em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size: 10px;
  display: inline-block;
  /*width: auto;*/
  height: 15px;
  /*border: 1px solid black;*/
  margin-left: 10px;
  position: absolute;
  margin-top: 10px;
}

.shop-shops > li {
  display: block;
  list-style: none;
  padding: 0;
  overflow: hidden;
  /*border: 1px solid #23fc02;*/
  width: 1000px;
  margin-top: 20px;
  background-color: rgba(102, 234, 239, 0.23);
}

.shop-shops {
  display: block;
}

.shop-name > li {
  display: block;
  list-style: none;

}

.shop-name {
  margin-top: 20px;
  display: block;
  background-color: rgba(1, 204, 179, 0.11);
  border: 1px solid rgba(213, 213, 213, 0.37);
}

.shop-infos {
  width: 1000px;
  height: auto;
  /*border: 1px solid rgba(98, 95, 95, 0.05);*/
  margin-left: 100px;
}

.check-the-order > h5 {
  display: inline-block;
  /*margin-left: 50px;*/
  margin-top: 25px;
  width: 137px;
  height: 15px;
  text-align: center;
  line-height: 15px;
  margin-left: 20px;
  border-bottom: 2px solid rgba(81, 229, 234, 0.6);
  font-size: 10px;
  font-weight: 400;
}

.check-the-order {
  height: auto;
  width: 1000px;
  /*border: 1px solid black;*/
  margin-left: 100px;
  margin-top: 40px;
  /*background-color: rgba(118, 237, 241, 0.06);*/
}

.we-chat, .alipay {
  width: 100px;
  height: 50px;
  border: 1px solid rgba(0, 0, 0, 0.17);
  float: left;
  /*margin-left: 40px;*/
  margin-top: 20px;
}

.payment-method {
  width: 833px;
  height: auto;
  /*border: 1px solid black;*/
  margin-left: 100px;
  margin-top: 40px;
  overflow: hidden;
}

.address > li {
  display: block;
  list-style: none;
}

.address {
  display: block;
}

.body-main {
  width: 1190px;
  height: auto;
  /*border: 1px solid black;*/
}

.choice-address {
  display: inline-block;
  margin-left: 100px;
}
</style>